<template>
  <div class="container">
    <!-- 主页面 -->
    <div class="info">
      <div class="font">
        <p class="title">渝见红岩</p>
        <p class="text" style="color: #fff">
          重庆是一座英雄的城市，是红岩精神的发源地。她波澜壮阔的革命历史，为我们留下了极其丰富的红色资源。本项目以红色文化为主线，红岩精神为核心，以红色旅游地图和文创产品为载体，最终实现弘扬红岩精神、传承红色基因的目标，将文化、创意、旅游、科技等相结合，开发衍生产品，增强红色文化的吸引力，提升红岩精神的影响力。
        </p>
        <p class="text" style="color: #fff">
          Chongqing is a city of heroes and the birthplace of the Hongyan
          spirit. Her magnificent revolutionary history has left us extremely
          rich red resources. This project takes red culture as the main line,
          Hongyan spirit as the core, and red tourism map and cultural and
          creative products as the carrier, and finally realizes the goal of
          carrying forward the Hongyan spirit and inheriting the red gene,
          combining culture, creativity, tourism, science and technology, etc.,
          to develop derivative products, enhance the attractiveness of red
          culture, and enhance the influence of Hongyan spirit.
        </p>
      </div>
      <video
        src="../assets/videoBG.mp4"
        wmode="transparent"
        autoplay
        muted
        loop
      ></video>
    </div>
    <!-- 登录注册 -->
    <div class="loginAndRegisterFrame">
      <!-- 登录 -->
      <div class="formItem">
        <svg
          t="1714284493743"
          class="icon"
          viewBox="0 0 1025 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4289"
          width="20"
          height="20"
        >
          <path
            d="M406.766493 519.191123C402.472299 519.191123 398.112041 518.365316 393.916945 516.581574 294.159525 474.432413 229.71359 377.185445 229.71359 268.872671 229.71359 120.623897 350.347396-0.00991 498.59617-0.00991 646.844945-0.00991 767.445719 120.623897 767.445719 268.872671 767.445719 373.849187 705.741461 469.873961 610.245203 513.509574 593.629977 521.073961 574.041848 513.806865 566.444428 497.224671 558.880041 480.609445 566.18017 461.021316 582.795396 453.456929 654.838751 420.523768 701.381203 348.050994 701.381203 268.872671 701.381203 157.025445 610.410364 66.054606 498.59617 66.054606 386.781977 66.054606 295.778106 157.025445 295.778106 268.872671 295.778106 350.594477 344.40159 423.92609 419.649074 455.736155 436.429461 462.83809 444.32417 482.228026 437.189203 499.041445 431.871009 511.626735 419.649074 519.191123 406.766493 519.191123"
            fill="#231814"
            p-id="4290"
          ></path>
          <path
            d="M673.71999 996.54689 673.686957 996.54689 103.087732 996.018374C67.148635 995.95231 34.413667 978.147923 15.519215 948.385858-2.714591 919.680826-4.960785 884.171148 9.44128 853.385084 59.485151 746.525729 190.623215 566.532955 506.708893 561.644181 831.614183 555.698374 949.803603 748.474632 991.325151 863.327794 1002.225796 893.486245 997.832506 925.989987 979.202312 952.547923 959.878441 980.096826 927.936248 996.54689 893.780893 996.54689L811.365409 996.54689C793.131603 996.54689 778.333151 981.781471 778.333151 963.514632 778.333151 945.247794 793.131603 930.482374 811.365409 930.482374L893.780893 930.482374C906.432248 930.482374 918.125667 924.536568 925.128506 914.62689 928.69599 909.50689 933.981151 899.002632 929.191474 885.756697 885.787086 765.750503 776.351215 623.282374 507.765925 627.708697 241.59199 631.837729 122.411603 767.930632 69.295732 881.396439 64.406957 891.768568 65.166699 903.296826 71.310699 912.975277 78.04928 923.578632 89.973925 929.920826 103.186828 929.953858L673.753022 930.482374C691.986828 930.515406 706.752248 945.280826 706.752248 963.547665 706.752248 981.781471 691.953796 996.54689 673.71999 996.54689"
            fill="#231814"
            p-id="4291"
          ></path>
        </svg>
        <input type="account" placeholder="请输入账号" v-model="account" />
      </div>
      <div class="formItem">
        <svg
          t="1697773793816"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="1485"
          width="20"
          height="20"
        >
          <path
            d="M288 384v-74.666667c0-123.722667 100.266667-224 224-224s224 100.224 224 224v74.666667h10.677333C811.445333 384 864 436.597333 864 501.333333v320c0 64.821333-52.469333 117.333333-117.322667 117.333334H277.333333C212.554667 938.666667 160 886.069333 160 821.333333V501.333333c0-64.821333 52.469333-117.333333 117.322667-117.333333H288z m64 0h320v-74.666667c0-88.426667-71.605333-160-160-160-88.384 0-160 71.626667-160 160v74.666667zM224 501.333333v320c0 29.397333 23.914667 53.333333 53.322667 53.333334H746.666667A53.269333 53.269333 0 0 0 800 821.333333V501.333333c0-29.397333-23.914667-53.333333-53.322667-53.333333H277.333333A53.269333 53.269333 0 0 0 224 501.333333z"
            fill="#000000"
            p-id="1486"
          ></path>
        </svg>
        <input type="password" placeholder="请输入密码" v-model="password" />
      </div>
      <el-button class="btn" @click="handleLogin">登录</el-button>
    </div>
  </div>
</template>

<script>
import { login } from "../api/login.js";
import { ElMessage } from "element-plus";
import Cookies from "js-cookie";

export default {
  data() {
    return {
      key: "", //验证码key值
      aliasing: "", //验证码图片地址
      account: "",
      password: "",
    };
  },
  methods: {
    // 登录
    async handleLogin() {
      const params = new FormData();
      params.append("username", this.account);
      params.append("password", this.password);
      try {
        login(params).then((res) => {
          if (res.code == 200) {
            this.$router.push({
              name: "TerritoryManagement",
            });
            Cookies.set("token", res.token);
            Cookies.set("user_id", res.user_id);
            ElMessage({
              message: "登录成功",
              type: "success",
            });
          } else {
            ElMessage({
              message: res.msg,
              type: "warning",
            });
          }
        });
      } catch (error) {
        console.log(error);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  position: relative;
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
  height: 100%;
}

/* 左侧系统描述和动效 */
.info {
  position: relative;
  width: 120%;
  height: 100vh;
  background: url(../assets/bg.jpg) no-repeat;
  overflow: hidden;
  z-index: 0;
}

.info .title {
  width: 65%;
  font-size: 50px;
  color: #fff;
  text-shadow: 3px 0 #5255ba;
}

.info .font {
  position: absolute;
  top: 15%;
  left: 5%;
  z-index: 2;

  p {
    margin-top: 10px;
  }

  .text {
    text-indent: 2em;
    width: 70%;
    font-size: 20px;
  }
}

.info .font .text:nth-child(3) {
  width: 80%;
  font-size: 16px;
}

.info video {
  position: absolute;
  left: -260px;
  min-width: 140%;
  z-index: 1;
}

.loginAndRegisterFrame {
  display: flex;
  justify-content: center;
  flex-flow: column nowrap;
  align-items: center;
  background: #fff;
  width: 45%;
}

.formItem {
  width: 300px;
  height: 45px;
  border: 1px solid var(--el-border-color);
  border-radius: 5px;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
  padding: 0 5px;
  margin-bottom: 30px;
  background-color: rgb(232, 240, 254);
  font-size: 14px;
}
.formItem img {
  width: 30%;
}

.formItem button {
  font-size: 10px;
  background: none;
  border: none;
  color: #4fb9ff;
  width: 180px;
  cursor: pointer;
}

input {
  flex-grow: 1;
  border: none;
  height: 100%;
  outline: none;
  padding: 0 10px;
  font-size: 14px;
  background: rgb(232, 240, 254);
}

.registrationJump {
  cursor: pointer;
  margin: 0 10px;
  color: #bbb;
}
.registrationJump:hover {
  color: #ccc;
}

.btn {
  width: 40%;
  height: 35px;
  background: #4fb9ff;
  letter-spacing: 10px;
  line-height: 35px;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  transition: all 1s;
}
.btn:hover {
  background: #8fd2ff;
}
</style>
